<template>
	<view style="background-color: #000;">
		<tui-navigation-bar :isFixed="true" :isOpacity="true" splitLine :zIndex="99999" :scrollTop="0" title="" backgroundColor="transparent" color="#333">
			<view style="height: 40px;display: flex;align-items: center;" @click="handleBack">
				<view style="width: 30rpx;"></view>
				<u-icon name="arrow-left" size="26" color="#fff"></u-icon>
				<view style="width: 10rpx"></view>
				<text style="font-size: 28rpx;color: #fff;">返回</text>
			</view>
		</tui-navigation-bar>
		<!-- <view style="padding: 0 24rpx;margin-top: 212rpx;">
			<view style="text-align: center;font-size: 48rpx;color: #F4DFCC;font-weight: ShiShangZhongHeiJianTi-Regular;margin-bottom: 28rpx;margin-top: 60rpx;">官方精选活动优先享</view>
			<view style="text-align: center;font-size: 48rpx;color: #F4DFCC;font-weight: ShiShangZhongHeiJianTi-Regular;margin-bottom: 66rpx;">专属服务达人1对1</view>

			<image  v-if="!userVipInfo?.vipStatus || userVipInfo?.vipStatus === 1" style="width: 100%;height: 368rpx;border-radius: 24rpx;" src="https://static.wddzq.com/static/vip_weijihuo.png"></image>
			<image  v-if="userVipInfo?.vipStatus === 2" style="width: 100%;height: 368rpx;border-radius: 24rpx;" src="https://static.wddzq.com/static/vip_yijihuo.png"></image>

			<view v-if="!userVipInfo?.vipStatus || userVipInfo?.vipStatus === 1" class="vip-active">激活后您可享受以下权益</view>
			<view v-if="userVipInfo?.vipStatus === 2" class="vip-active">铂金会员可享受以下权益</view>
			<view class="vip-list" style="display: flex;justify-content:space-around; align-items: center;margin-top: 64rpx;margin-bottom: 70rpx;">
				<view class="vip-item">
					<image src="https://static.wddzq.com/static/youxianbaoming.png"></image>
					<text>优先报名</text>
				</view>
				<view class="vip-item">
					<image src="https://static.wddzq.com/static/zhuanshushenfen.png"></image>
					<text>专属身份</text>
				</view>
				<view class="vip-item">
					<image src="https://static.wddzq.com/static/zhuanshukefu.png"></image>
					<text>专属客服</text>
				</view>
				<view class="vip-item">
					<image src="https://static.wddzq.com/static/zhuanjiaguanjia.png"></image>
					<text>专属管家达人</text>
				</view>
			</view>

			<u-button @click="handleSubmit" v-if="!userVipInfo?.vipStatus || userVipInfo?.vipStatus === 1" customStyle="background: linear-gradient(313deg, #FAD9B6 0%, #FAE2C5 100%);height: 88rpx;border-radius: 44rpx;margin-top: 64rpx;border: none;" color="#2C2720" >
				<text  style="font-size: 28rpx;color: #2C2720;">{{userVipInfo?.amount || ''}} 元 立即开通</text>
			</u-button>
      <u-button @click="openVipKeFu" v-if="userVipInfo?.vipStatus === 2" customStyle="background: linear-gradient(313deg, #FAD9B6 0%, #FAE2C5 100%);height: 88rpx;border-radius: 44rpx;margin-top: 64rpx;border: none;" color="#2C2720" >
        <text style="font-size: 28rpx;color: #2C2720;" >联系专属客服</text>
      </u-button>
		</view>

		<tui-ctabbar :current="3" :refresh="refresh"></tui-ctabbar> -->
		
		<image v-if="!userVipInfo?.vipStatus || userVipInfo?.vipStatus === 1" style="width: 750rpx;height: 100%;" mode="widthFix" src="https://static.wddzq.com/static/open_page.jpg" />
		<image v-if="userVipInfo?.vipStatus === 2" style="width: 750rpx;height: 100%;" mode="widthFix" src="https://static.wddzq.com/static/open_after_page.jpg" />
		
		<view style="width: 100%;position: fixed;left: 0;bottom: 0;border-top: 1rpx solid rgba(0,0,0,.3);background-color: rgba(255,255,255,.2);">
			<image @click="handleSubmit" v-if="!userVipInfo?.vipStatus || userVipInfo?.vipStatus === 1" style="width: 90%;height: 72rpx;margin: 30rpx 0; margin-left: 5%;" mode="widthFix" src="https://static.wddzq.com/static/open_btn.png" />
			<image @click="openVipKeFu" v-if="userVipInfo?.vipStatus === 2" style="width: 90%;height: 72rpx;margin: 30rpx 0; margin-left: 5%;" mode="widthFix" src="https://static.wddzq.com/static/open_after_btn.png" />
		</view>
	</view>
</template>

<script>
	import { createVipOrderPay, getUserVipInfo } from '../../config/api.js';
	import { to } from '../../config/utils.js'

	export default {
		data() {
			return {
				refresh: 0,
				userVipInfo: {}
			}
		},
		onShow() {
			this.refresh = Math.random();
			this.getUserVipInfo();
		},
		onReady() {
		},
		methods: {
			handleBack() {
				uni.navigateBack();
			},
		  openVipKeFu(){
        // 会员专属客服
        // wx.openCustomerServiceChat({
        //   extInfo: {url: "https://work.weixin.qq.com/kfid/kfcf9f4b153785d6dd5"},
        //   corpId: "wwda390ba00d219a0e",
        //   success(res) {}
        // })
				uni.navigateTo({
					url: '/pages/kefu/kefu'
				})
      },
			// 获取会员信息
			async getUserVipInfo() {
				const [err, data] = await to(getUserVipInfo());

				if(err) {
					return uni.showToast({
						title: err?.msg || '获取会员信息失败',
						icon: 'none'
					})
				}
				console.log(data);
				if(data.success) {
					this.userVipInfo = data?.data || {};
				} else {
					uni.showToast({
						title: data?.msg || '获取会员信息失败',
						icon: 'none'
					})
				}

			},
			// 创建会员订单
			async createVipOrderPay() {
				let that = this;
				const [err, data] = await to(createVipOrderPay());

				if(err) {
					return uni.showToast({
						title: err?.msg || '获取会员支付信息失败',
						icon: 'none'
					})
				}
				if(data.success && data.data) {
					const { onlineTradeInfo } = data.data || {};
					uni.requestPayment({
						"provider": "wxpay",
						"package": onlineTradeInfo?.packageValue,
						"signType": "MD5",
						"paySign": onlineTradeInfo?.sign,
						// "orderInfo": {
						...(onlineTradeInfo || {}),
						// },
						success(res) {
							console.log(res);
							that.getUserVipInfo();
						},
						fail(e) {
							console.log(e)
							uni.showToast({
								title: e?.errMsg || '未知原因失败',
								icon: 'none'
							})
						}
					})
				} else {
					uni.showToast({
						title: data?.msg || '获取会员支付信息失败',
						icon: 'none'
					})
				}
			},
			handleSubmit() {
				this.createVipOrderPay();
			}
		}
	}
</script>

<style>
page {
	width: 100%;
	height: 100%;
	background-color: #2C2720;
}
.vip-active {
	font-size: 32rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #F7EFCD;
	text-align: center;
	margin-top: 58rpx;
}
.vip-item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.vip-item image {
	width: 92rpx;
	height: 92rpx;
	margin-bottom: 12rpx;
}
.vip-item text {
	font-size: 28rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #FDEBCF;
}
</style>
